import React, { Component } from 'react'
import './myConsumption.less'
import Hrader from '../../../components/head/hrader'
import axios from 'axios'
import cookies from 'js-cookie'
class MyConsumption extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '消费记录', path: '/my' },
            myelsedata: [],//付款数据
            user_data: '',//用户数据
            num: '',//累计消费
            // type: 0,//足迹与消费的状态状态    消费0
        }
    }
    render() {
        let { headtitle, user_data, num, } = this.state
        // console.log(user_data);
        return (
            <div className="MyConsumption_box">
                <div>
                    <Hrader title={headtitle} />
                </div>
                <div className="MyConsumption_message">
                    <div className="MyConsumption_heads">
                        {/* <div > */}
                        <img src={user_data.user_portrait} className="MyConsumption_img" alt="" />
                        {/* </div> */}
                        <div>{user_data.user_name}</div>
                    </div>
                    <div className="MyConsumption_title" >
                        <div>
                            累计消费
                        </div>
                        <div className="MyConsumption_num">{num}元</div>
                    </div>
                </div>
                <div className="MyConsumption_timeline">
                    <div className="MyConsumption_time  animate__fadeInUp animate__animated ">
                        <div className="MyConsumption_timeConent">
                            <p className="icon-shizhong iconfont"></p>
                            <p className="MyConsumption_shuTime"></p>
                        </div>
                    </div>
                    <div>


                        {/* 
                        循环消费数据的地方
                        */}

                        {this.state.myelsedata.map((item, index) => {
                            return <div className="MyConsumption_data  animate__fadeInUp animate__animated " key={index}>
                                <div className="MyConsumption_left">
                                    <p className="icon-double-circle iconfont"></p>
                                </div>
                                <div className="MyConsumption_right">
                                    <p className="MyConsumption_shuIcon"></p>
                                    <div className="MyConsumption_jianjiao "></div>
                                    <div className="MyConsumption_rightTitle">
                                        <div>您于{item.timer}<p><span>使用其他方式支付</span><b>{item.cash}元</b></p></div>
                                    </div>
                                </div>
                            </div>
                        })}




                    </div>
                </div>

            </div>
        )
    }
    componentDidMount() {
        const _this = this
        // 组件共用   足迹  与  消费记录
        // console.log(this.props.location);
        let { state, type } = this.props.location
        // console.log(state);
        if (this.props.message) {
            let { message } = this.props
            // console.log(message);
            cookies.set('user_id', message.user_id)
            _this.setState({
                user_data: message,//数据
            }, () => { this.fun() })
        } else if (cookies.get('usertoken')) {
            axios({
                method: 'post',
                url: '/api/front_end/userMess',
                data: {
                    user_account: cookies.get('usertoken'),
                }
            }).then((res) => {
                let datas = res.data
                // console.log(datas);
                if (datas.code === '01') {
                    cookies.set('user_id', datas.data.user_id)
                    _this.setState({
                        user_data: datas.data,//数据
                    }, () => { this.fun() })
                }
            })
        }
    }

    fun = () => {
        let { state } = this.props.location
        // if (state === '我的消费') {
        if (cookies.get('user_id')) {
            axios({
                method: 'post',
                url: '/api/front_end/myElse',
                data: {
                    user_id: cookies.get('user_id'), //用户id
                }
            }).then(res => {
                // console.log(res.data.data);
                let num = null
                res.data.data.forEach(item => {
                    num += item.cash * -1
                });
                this.setState({ myelsedata: res.data.data, num })
            })
        }
        // } else {
        //     // 我的足迹
        //     console.log('我的足迹');
        //     this.setState({ headtitle: { title: state, path: '/my' }, type: 1 }, () => {
        //         console.log(this.state.user_data);
        //     })
        //     axios({
        //         method: 'post',
        //         url: '/api/front_end/getHistory',
        //         data: {
        //             user_id: cookies.get('user_id'), //用户id
        //         }
        //     }).then(res => {
        //         console.log(res.data);
        //     })
        // }
    }
}
export default MyConsumption